<template>
  <div>
    <li class="list-group-item">{{comment.username}}
      <span>说：</span>
      <p class="content">{{comment.content}}</p>
      <button type="button" class="btn btn-danger deleteStype" @click="deleteItem(index,comment.content)">删除</button>
    </li>

    <!--<li class="list-group-item">Second item-->
    <!--<span>说：</span>-->
    <!--<p class="content">删除</p>-->
    <!--<button type="button" class="btn btn-danger deleteStype">删除</button>-->
    <!--</li>-->

    <!--<li class="list-group-item">Third item-->
    <!--<span>说：</span>-->
    <!--<p class="content">删除</p>-->
    <!--<button type="button" class="btn btn-danger deleteStype">删除</button>-->
    <!--</li>-->
  </div>
</template>

<script>
  export default {
    //方式一：接收标签上绑定的comments属性,以对象的形式接收，指定数据类型
    props: {
      comment: Object,
      index: Number,
      deleteContent: Function
    },
    methods: {
      deleteItem(index, content) {
        if (window.confirm('确定要删除内容为<<' + content + ">>的此条评论吗？")) {
          this.deleteContent(index)
        }
      }
    }
  }
</script>

<style scoped>
  .content {
    padding-left: 100px;
    padding-top: 10px;
    font-size: 20px
  }

  .deleteStype {
    margin-left: 90%;
  }
</style>
